<template>
  <div class="layout" style="height: 100%;margin-top: -16px;">
    <div class="fixed-box" :style="{left :leftWidth,opacity:fixedShow?1:0 }">
      <overview-header style="margin-bottom: 24px;margin-left: -2px;" @typeChange="typeChange" @seriesChange="seriesChange" @adChange="adChange" />
      <div class="header">
        <cell-header :title="title1" :type="1" style="padding-bottom: 24px;">
          <!-- <i
            v-if="refreshIsShow"
            slot="sec"
            class="iconfont icon-shuaxin pointer"
            :style="{fontSize:'20px',color:'#15c5ce',opacity:referTime?'0.5':'1'}"
            @click="handlerShuaXin"
          ></i> -->
          <choose-time class="choose-box" />
        </cell-header>
      </div>
    </div>

    <div id="main-overview" class="main-overview">
      <router-view ref="ad-box" :key="key" />
    </div>

  </div>
  <!-- 广告系列图表展示结束 -->
</template>

<script>
import chooseTime from './components/chooseTime/new-index.vue'
import overviewHeader from './components/overview-header/index.vue'
import cellHeader from '@/components/cell-header.vue'
import {
  mapGetters
} from 'vuex'

import {
  refreshAdvReports
} from '@/api/overView.js'

export default {
  components: {
    chooseTime,
    cellHeader,
    overviewHeader
  },
  data() {
    return {
      fixedShow: false,
      title1: undefined,
      tableData: [],
      timeArr: [],
      referTime: undefined
    }
  },
  computed: {
    ...mapGetters([
      'sidebar'
    ]),
    refreshIsShow() {
      if (this.$route.name === 'seriesOverview') {
        const campaignId = this.$route.query.campaignId || this.$route.query.campaignid
        const caList = this.$store.state.overview.allCa
        const index = caList.findIndex(item => { return item.campaignId == campaignId })

        if (this.$route.query.caStatus === 'DELETED' || caList[index].displayStatus === 'DELETED') return false
        return true
      } else {
        return false
      }
    },

    key() {
      return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
    },

    opened() {
      return this.sidebar.opened
    },
    device() {
      return this.$store.state.app.device
    },
    leftWidth() {
      if (this.device === 'mobile') {
        return '0px'
      } else {
        if (!this.opened) {
          return '80px'
        } else {
          return '240px'
        }
      }
    }

  },

  // 监听路由
  watch: {
    $route: {
      immediate: true,
      handler: function(val, oldVal) {
        var type
        const name = val.name
        switch (name) {
          case 'typeOverview':
            type = '数据概览'
            break
          case 'seriesOverview':
            type = '广告系列详情'
            break
          case 'groupOverview':
            type = '广告组详情'
            break
        }
        this.title1 = type

        // 子路由跳转的时候 页面滚动到顶部
        this.$nextTick(() => {
          const el = document.getElementById('main-overview')
          el.scrollTop = 0
          document.documentElement.scrollTop = 0
        })
      },
      // 深度观察监听
      deep: true
    }
  },
  mounted() {
    setTimeout(() => {
      this.fixedShow = true
    }, 200)
  },
  beforeDestroy() {
    this.fixedShow = false
  },
  methods: {
    /*    handleTimeChange(arr) {
                this.timeArr = arr
                this.$nextTick(() => {
                  this.$refs['ad-box'].pieckerChange(arr)
                })
              }, */

    async handlerShuaXin() {
      if (this.referTime) {
        return false
      } else {
        this.referTime = setTimeout(() => {
          clearTimeout(this.referTime)
          this.referTime = undefined
        }, 1000)
      }
      const obj = {}
      obj.orgId = this.$route.query.orgId || this.$route.query.orgid || ''
      obj.currencyType = this.$store.state.user.unit
      const res = await refreshAdvReports(obj)
      if (res.data.code * 1 === 20000 && res.data.flag) {
        this.$message({
          type: 'success',
          message: res.data.message || '刷新成功,请稍候刷新页面查看数据'
        })
      } else {
        this.$message.error(res.data.message || '刷新失败,请稍候重试')
      }
      console.log(res, '刷新成功了吗')
    },

    typeChange(obj) {
      this.$router.replace({
        name: 'typeOverview',
        query: {
          ...obj
        }
      })
      // this.$nextTick(() => {
      //   this.$refs['ad-box'].pieckerChange(this.timeArr)
      // })
    },

    seriesChange(obj) {
      if (obj.campaignId !== 'all') {
        this.$router.push({
          name: 'seriesOverview',
          query: {
            ...obj
          }
        })
      } else {
        // 如果是全部广告系列  就跳往投放模式系列

        const query = JSON.parse(JSON.stringify(obj))
        delete query.campaignId

        this.$router.replace({
          name: 'typeOverview',
          query: {
            ...query
          }
        })
      }

      // this.$nextTick(() => {
      //   this.$refs['ad-box'].pieckerChange(this.timeArr)
      // })
    },

    adChange(obj) {
      if (obj.adGroupId) {
        this.$router.push({
          name: 'groupOverview',
          query: {
            ...obj
          }
        })
      } else {
        this.$router.push({
          name: 'seriesOverview',
          query: {
            ...obj
          }
        })
      }
      // this.$nextTick(() => {
      //   this.$refs['ad-box'].pieckerChange(this.timeArr)
      // })
    }
  }
}
</script>

<style lang="scss" scoped="true">
  @import "~@/styles/variables.scss";

  .header {
    .title {
      font-size: 20px;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      letter-spacing: 2px;
      margin: 0;

    }
  }

  .main-overview {
    padding-top: 100px;
    overflow: hidden;

    &::-webkit-scrollbar {
      width: 0 !important;
      -ms-overflow-style: none;
      overflow: -moz-scrollbars-none;
    }
  }

  .data {
    padding-bottom: 30px;

    // background-color: red;
    .choose-box {
      margin-bottom: 30px;
    }
  }

  .trend {
    padding-bottom: 30px;
  }

  .echarts-box {
    .choose-box {
      margin-bottom: 30px;
    }

    .series-table {
      margin-top: 30px;
    }

  }

  .fixed-box {
    padding: 0 24px;
    padding-top: 12px;
    right: 0;
    position: fixed;
    top: $navBarHeight;
    z-index: 100;
    background-color: #f9f9f9;
    transition: opacity 0.5s;

  }
</style>
